## 当前版本 [1.5.x]

https://www.npmjs.com/package/andy-aui-css

## 命名规范

### 不要使用非ns的类 [组件内除外]
```css
.component
.list
.grid
```

一定要加ns

```css
.#{$ns}-component
.#{$ns}-list
.#{$ns}-grid
```

### 保留命名空间

1. a -> application
2. u -> ui
3. c -> component

## 开发工具包

### 预定义变量

#### $posalias

```scss
$posalias: (
    l: left,
    t: top,
    r: right,
    b: bottom
);
```

### 预定义mixin

#### aui-browser-ie9

ie9 mixin
```scss
@mixin aui-browser-ie9 () {
    $self: #{&};
    html.ie9 {
        @at-root {
           #{$self} {
               @content;
           }     
        }
    }
}
```

#### aui-browser-greate-ie10

ie10 mixin
```scss
@mixin aui-browser-greate-ie10 () {
    $self: #{&};
    @at-root {
        _:-ms-input-placeholder, :root #{$self} {
            @content;
        }     
    }    
}
```

#### aui-browser-greate-ie11

ie11 mixin
```scss
@mixin aui-browser-greate-ie11 () {
    $self: #{&};
    @at-root {
        _:-ms-fullscreen, :root #{$self} {
            @content;
        }     
    }    
}
```

#### create-gutter-class

创建一个margin 或者padding class

```scss
@mixin create-gutter-class($value, $sel: "m", $type: "margin", $pos: (l,t,r,b), $ns: "u") {
    @each $a in $pos {
        .#{$ns}-#{$sel}-#{$a}-#{$value} {
            #{$type}-#{map-get($posalias, $a)}: #{$value}px;
        }
    }
}
```

#### create-gutter-extend

创建gutter h 和 v方向高级类

```scss
@mixin create-gutter-extend($i, $sel: "m") {
    .u-#{$sel}-h-#{$i} {
        @extend .u-#{$sel}-l-#{$i};
        @extend .u-#{$sel}-r-#{$i};
    }
    .u-#{$sel}-v-#{$i} {
        @extend .u-#{$sel}-t-#{$i};
        @extend .u-#{$sel}-b-#{$i};
    }
}
```

#### create-align-center

创建一个内部居中代码

```scss
@mixin create-align-center($sel) {
    &:before {
        content: "";
        height: 100%;
        vertical-align: middle;
    }
    > #{$sel} {
        vertical-align: middle;
    }
    @content;
}    
```

#### aui-exp-host [> 1.0.18]

组件使用的host mixin 

:host 只在顶级有用

```scss
@mixin aui-exp-host($host, $sel, $append: " > ") {
    $s: "";
    @if ($host != ":host") {
        $s: $s + $host + $append;
    } 
    #{$s + $sel} {
        @content;
    }
}
```

example

```scss
@include aui-exp-host("aux-text", ".aux-text") {
    // aux-text > .aux-text
    overflow: hidden;
    text-overflow: ellipsis;
    display: inline-block;
    white-space: pre;
    width: 100%;
}
```

#### aui-selector-state

```scss
@mixin aui-selector-state($state, $parent: #{&}) {
    &#{$parent}--#{$state} {
        @content;
    }
}
```

#### aui-clear-fix [> 1.0.18]

```scss
@mixin aui-clear-fix() {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}
```

#### aui-abs-center [> 1.5.5]

```scss
@mixin aui-abs-center() {
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
}
```

#### aui-layout-inline-block-vertical-center [> 1.5.5]

```scss
@mixin aui-layout-inline-block-vertical-center() {
    &:before {
        content: "";
        display: inline-block;
        width: 0;
        height: 100%;
        @content;
    }
}
```

#### aui-reset-ie [> 1.5.5]

```scss
@mixin aui-reset-ie() {
    input[type=password]::-ms-reveal,
    input[type=password]::-ms-clear
    {
        display: none;
    }
    input::-ms-clear {
        display: none;
    }
}
```

#### aui-selector-state  [> 1.0.18]

```scss
@mixin aui-selector-state($state, $parent: #{&}) {
    &#{$parent}--#{$state} {
        @content;
    }
}
```

#### aui-clear-fix

```scss
@mixin aui-clear-fix() {
    &:after {
        content: "";
        display: table;
        clear: both;
    }
}
``` 

### 动画

```scss
// 赛贝尔曲线
$ani-linear         : "0.250, 0.250, 0.750, 0.750" !default
$ani-ease           : "0.250, 0.100, 0.250, 1.000" !default
$ani-ease-in        : "0.420, 0.000, 1.000, 1.000" !default
$ani-ease-out       : "0.000, 0.000, 0.580, 1.000" !default
$ani-ease-in-out    : "0.420, 0.000, 0.580, 1.000" !default

$ani-easeInQuad     : "0.550, 0.085, 0.680, 0.530" !default
$ani-easeInCubic    : "0.550, 0.055, 0.675, 0.190" !default
$ani-easeInQuart    : "0.895, 0.030, 0.685, 0.220" !default
$ani-easeInQuint    : "0.755, 0.050, 0.855, 0.060" !default
$ani-easeInSine     : "0.470, 0.000, 0.745, 0.715" !default
$ani-easeInExpo     : "0.950, 0.050, 0.795, 0.035" !default
$ani-easeInCirc     : "0.600, 0.040, 0.980, 0.335" !default
$ani-easeInBack     : "0.600, -0.280, 0.735, 0.045" !default

$ani-easeOutQuad    :  "0.250, 0.460, 0.450, 0.940" !default
$ani-easeOutCubic   :  "0.215, 0.610, 0.355, 1.000" !default
$ani-easeOutQuart   :  "0.165, 0.840, 0.440, 1.000" !default
$ani-easeOutQuint   :  "0.230, 1.000, 0.320, 1.000" !default
$ani-easeOutSine    :  "0.390, 0.575, 0.565, 1.000" !default
$ani-easeOutExpo    :  "0.190, 1.000, 0.220, 1.000" !default
$ani-easeOutCirc    :  "0.075, 0.820, 0.165, 1.000" !default
$ani-easeOutBack    :  "0.175, 0.885, 0.320, 1.275" !default

$ani-easeInOutQuad  :  "0.455, 0.030, 0.515, 0.955" !default
$ani-easeInOutCubic :  "0.645, 0.045, 0.355, 1.000" !default
$ani-easeInOutQuart :  "0.770, 0.000, 0.175, 1.000" !default
$ani-easeInOutQuint :  "0.860, 0.000, 0.070, 1.000" !default
$ani-easeInOutSine  :  "0.445, 0.050, 0.550, 0.950" !default
$ani-easeInOutExpo  :  "1.000, 0.000, 0.000, 1.000" !default
$ani-easeInOutCirc  :  "0.785, 0.135, 0.150, 0.860" !default
$ani-easeInOutBack  :  "0.680, -0.550, 0.265, 1.550" !default
```


## 基础UI

### normalize.css
解决浏览器之间的差距
<aux-code
    src="andy-aui-css/ui/_normalize.scss"
></aux-code>  

### 全局css

<aux-code
    src="andy-aui-css/ui/_global.scss"
></aux-code> 

### 核心css
<aux-code
    src="andy-aui-css/ui/_core.scss"
></aux-code>  

### 文字大小

<aux-code
    src="andy-aui-css/ui/_font.scss"
></aux-code> 

### gutter 包括 margin padding

<aux-code
    src="andy-aui-css/ui/_margin.scss"
></aux-code> 

### text

<aux-code
    src="andy-aui-css/ui/_text.scss"
></aux-code> 

### overflow 

<aux-code
    src="andy-aui-css/ui/_overflow.scss"
></aux-code> 

### 位置
<aux-code
    src="andy-aui-css/ui/_position.scss"
></aux-code>    

## 布局

### flex

<aux-code
    src="andy-aui-css/ui/_layout.scss"
></aux-code>  

### 横向列表

```html
<div class="u-list u-list--h">
    <div class="u-list-item"></div>
    <div class="u-list-item"></div>
    <div class="u-list-item"></div>
    <div class="u-list-item"></div>
    <div class="u-list-item"></div>
    <div class="u-list-item"></div>
    <div class="u-list-item"></div>
</div>
```

<aux-code
    src="andy-aui-css/ui/_list.scss"
></aux-code> 

[iframe src="./basic/demos/layout/list.html"]

### 横向列表垂直居中

corss 代表次轴

```html
<div class="u-list u-list--h u-list--cross-center">
    <div class="u-list-item">
        <img class="u-list--item" 
            style="width: 60px; height: 60px; overflow: hidden;" 
            src="https://static.zhilizhili.com/static/3828461873613813290.jpg">
    </div>
    <div class="u-list-item">测试</div> 
</div>    

<div class="u-list u-list--h u-list--cross-top">
    <div class="u-list-item">
        <img class="u-list--item" 
            style="width: 60px; height: 60px; overflow: hidden;" 
            src="https://static.zhilizhili.com/static/3828461873613813290.jpg">
    </div>
    <div class="u-list-item">测试</div> 
</div>

<div class="u-list u-list--h u-list--cross-bottom">
    <div class="u-list-item">
        <img class="u-list--item" 
            style="width: 60px; height: 60px; overflow: hidden;" 
            src="https://static.zhilizhili.com/static/3828461873613813290.jpg">
    </div>
    <div class="u-list-item">测试</div> 
</div>
```

[iframe src="./basic/demos/layout/list-v-center.html?exp=img"]

文字版

```html
<div class="u-list u-list--h u-list--cross-center"><div 
    class="u-list-item">测试1</div><div 
    class="u-list-item">测试</div> 
</div>    
```

[iframe src="./basic/demos/layout/list-v-center.html?exp=default"]

#### 垂直

```scss
.u-list--cross-center:before {
    content: "";
    height: 100%;
    vertical-align: middle;
    display: inline-block;
}
```

#### 水平

```scss
.u-list--main-center {
    text-align: center;
}
```

## 扩展包

### 布局

#### grid
```html
<div class="u-grid">
    <div class="u-grid-item">1</div>
    <div class="u-grid-item">2</div>
    <div class="u-grid-item">3</div>     
</div> 
```

[iframe src="./basic/demos/layout/grid.html?exp=default"]

## 基础图形

### 三角形

https://codepen.io/yukulele/pen/KLnhJ?q=triangle&order=popularity&depth=everything&show_forks=false

```css
.triangle.up {
    width: 0;
    height: 0;
    border: 0 solid transparent;
    border-right-width: 7px;
    border-left-width: 7px;
    border-bottom: 8px solid black;
}
```

### tooltip

https://codepen.io/andypinet/pen/dKOpqy

![basic1](./basic/basic1.png)


